<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<title>布局</title>
		<!--<link href="favicon.ico" rel="icon" type="image/x-icon" />-->
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../css/default.css">
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			
				function jjj(){
					
				var exist = $('#tt').tabs('exists','tabl3');
				if(exist){
					alert("re")
					$('tt').tabs('selected',true);
					
				}else{
					$('#tt').tabs('add',{
							title:'tabl3',
							content:'3',
							closable:true,
							tools:[{
								iconCls:'refresh',
								handler:function(){
									alert('refresh')
								}
							}]
							
						});
					}
				};
		
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
				callback:{
					// 设置左边面板的点击事件
					onClick: function(event, treeId, treeNode, clickFlag){
						var content = "<div style='width:100%';height:100%;overflow:hidden;'><iform></iform> ""</div>"
						
						if(treeNode.name)
						
			
					}
				}
			}
		};
		
		
		
		var zNodes =[
			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
			{ id:11, pId:1, name:"父节点11 - 折叠",pp:"http://www.hao123.com"},
			{ id:12, pId:1, name:"父节点12 - 折叠"},
			{ id:13, pId:1, name:"父节点13 - 没有子节点"},
			{ id:2, pId:0, name:"父节点2 - 折叠"},
			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
			{ id:22, pId:2, name:"父节点22 - 折叠",pp:"http://www.baidu.com"},
			{ id:23, pId:2, name:"父节点23 - 折叠"},
			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		
		</script>
	</head>
	<body class="easyui-layout">   
	    <div data-options="region:'north',title:'上方面板',split:true" style="height:100px;"></div>  
	    <div data-options="region:'south',title:'下方面板',split:true" style="height:100px;"></div>  
	    <div data-options="region:'east',iconCls:'icon-add',title:'右侧面板',split:true" style="width:100px;"></div>  
	    <div id="aa" class="easyui-accordion" data-options="region:'west',title:'左侧面板',split:true,collapsible:true" style="overflow:auto; width: 200px;">
		    	<div title="折叠一" data-options="">
		    		<a href="#" id="tab3" onclick="jjj()">tab3</a>
		    	</div>
		    	<div title="折叠二" style="border: 1px;">
		    		<ul id="treeDemo" class="ztree"></ul>
		    	</div>
		    	<div title="折叠三">
		    		折叠三
		    	</div>


	    </div>
	    <div id="tt" class="easyui-tabs" data-options="region:'center',title:'中间面板'" style="padding:5px;background:#eee;">
	    	<div title="tab1" data-options="closable:true">1</div>
	    	<div title="tab2" data-options="selected:false">2</div>
	    	
	    </div>   
	</body>  
	<!--<script type="text/javascript">
		$("#tab3").click(function(){
					alert("123")
				var exist = $('#tt').tabs('exists','tabl3');
				if(exist){
					alert("re")
					$('tt').tabs('selected',true);
					
				}else{
					$('#tt').tabs('add',{
							title:'tabl3',
							content:'3',
							closable:true,
							tools:[{
								iconCls:'refresh',
								handler:function(){
									alert('refresh')
								}
							}]
							
						});
					}
				});
		
	</script>-->
</html>
